<template>
  <Modal title="更换手牌" :width="500" :show-confirm-button="false">
    <div class="replace-card-modal">
      <div class="form-item">
        <label>手牌号:</label>
        <a-input
          v-model:value="formData.oldCardNumber"
          placeholder="点击&quot;Enter&quot;录入"
        />
      </div>

      <div class="form-item">
        <label>新手牌:</label>
        <a-input
          v-model:value="formData.newCardNumber"
          placeholder="点击&quot;Enter&quot;录入"
        />
      </div>

      <div class="form-item">
        <label>备注:</label>
        <a-textarea
          v-model:value="formData.remarks"
          :rows="3"
          placeholder="请输入备注信息"
        />
      </div>

      <div class="form-item">
        <label>操作人员:</label>
        <a-select
          v-model:value="formData.operator"
          placeholder="请选择操作人员"
        >
          <a-select-option value="王玉">王玉</a-select-option>
          <a-select-option value="王雨然">王雨然</a-select-option>
          <a-select-option value="王雨涵">王雨涵</a-select-option>
        </a-select>
      </div>

      <div class="modal-actions">
        <a-button type="primary" @click="handleConfirm">确定</a-button>
        <a-button @click="handleCancel">取消</a-button>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue'

defineOptions({
  name: 'ReplaceCardModal',
});

interface Emits {
  (e: 'success'): void;
}

interface ModalPayload {
  oldCardNumber?: string;
  newCardNumber?: string;
}

const emit = defineEmits<Emits>()

const formData = ref({
  oldCardNumber: '',
  newCardNumber: '',
  remarks: '',
  operator: '王玉'
})

const [Modal, modalApi] = useVbenModal({
  showCancelButton: false,
  showConfirmButton: false,
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return;
    }
    const data = modalApi.getData<ModalPayload>();
    formData.value = {
      oldCardNumber: data?.oldCardNumber || '',
      newCardNumber: data?.newCardNumber || '',
      remarks: '',
      operator: '王玉'
    };
  },
});

const handleConfirm = () => {
  if (!formData.value.oldCardNumber || !formData.value.newCardNumber) {
    message.warning('请输入手牌号')
    return
  }
  message.success('手牌更换成功')
  emit('success');
  modalApi.close();
}

const handleCancel = () => {
  modalApi.close();
}
</script>

<style scoped>
.replace-card-modal {
  padding: 20px 0;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}
</style>
